<template>
  <div class="substation-status">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="station-status">
          <div class="title-bgc">变电所状态</div>
          <el-form :inline="true">
            <el-form-item label="名称:">
              <el-input size="large" v-model="value"></el-input>
            </el-form-item>
            <el-form-item>
              <button class="btn">查询</button>
            </el-form-item>
          </el-form>
          <div class="data-wrap">
            <div class="one-line">
              <div class="v">
                <div class="val">10KV</div>
                <div class="name-wrap">
                  <div class="name">电压等级</div>
                  <img src="./images/v.png" alt="" />
                </div>
              </div>
              <div class="transformer-num">
                <div class="val">116</div>
                <div class="name-wrap">
                  <div class="name">变压器数量</div>
                  <img src="./images/transformer-num.png" alt="" />
                </div>
              </div>
              <div class="device">
                <div class="val">191</div>
                <div class="name-wrap">
                  <div class="name">测控装置</div>
                  <img src="./images/device.png" alt="" />
                </div>
              </div>
            </div>
            <div class="two-line">
              <div class="installed-capacity">
                <div class="val">278000KVA</div>
                <div class="name-wrap">
                  <div class="name">装机容量</div>
                  <img src="./images/installed-capacity.png" alt="" />
                </div>
              </div>

              <div class="declare-capacity">
                <div class="val">278000KVA</div>
                <div class="name-wrap">
                  <div class="name">申报容量</div>
                  <img src="./images/declare-capacity.png" alt="" />
                </div>
              </div>
              <div class="xx" style="opacity: 0"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="run-status">
          <div class="title-bgc">运行状态</div>
          <div class="content-wrap">
            <div class="kw">
              <img src="./images/kw.png" alt="" />
              <div class="name">有功功率</div>
              <div class="val">826.6 <span>kw</span></div>
            </div>
            <div class="kvar">
              <img src="./images/kvar.png" alt="" />
              <div class="name">无功功率</div>
              <div class="val">-24.6 <span>kvar</span></div>
            </div>
            <div class="c">
              <img src="./images/c.png" alt="" />
              <div class="name">环境温度</div>
              <div class="val">0 <span>℃</span></div>
            </div>
            <div class="water">
              <img src="./images/water.png" alt="" />
              <div class="name">环境湿度</div>
              <div class="val">0 <span>℃</span></div>
            </div>
          </div>
          <ul class="jump-wrap">
            <li class="diagram">
              <div class="img-wrap">
                <img src="./images/run1.png" alt="" />
              </div>
              <div class="name">配电图</div>
            </li>
            <li class="video">
              <div class="img-wrap">
                <img src="./images/run2.png" alt="" />
              </div>
              <div class="name">视频</div>
            </li>
            <li class="transformer">
              <div class="img-wrap">
                <img src="./images/run3.png" alt="" />
              </div>
              <div class="name">变压器</div>
            </li>
            <li class="communication">
              <div class="img-wrap">
                <img src="./images/run4.png" alt="" />
              </div>
              <div class="name">通讯</div>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="8"
        ><div class="electric-situation">
          <div class="title-bgc">用电概况</div>
          <div class="pie-wrap">
            <PieChart />
          </div>
          <ul class="sel-wrap" @click.prevent="chageType">
            <li
              class="day"
              :style="{ background: flag == 'day' ? '#091a37' : '' }"
            >
              日
            </li>
            <li
              class="month"
              :style="{ background: flag == 'month' ? '#091a37' : '' }"
            >
              月
            </li>
            <li
              class="year"
              :style="{ background: flag == 'year' ? '#091a37' : '' }"
            >
              年
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="event-record-wrap">
          <div class="title-bgc">当日事件记录</div>
          <div class="content-wrap">
            <div class="out-limit">
              <img src="./images/out-limit.png" alt="" />
              <div class="name">遥测越限</div>
              <div class="val">0<span>次</span></div>
            </div>
            <div class="telecommand">
              <img src="./images/telecommand.png" alt="" />
              <div class="name">遥测越限</div>
              <div class="val">0<span>次</span></div>
            </div>
            <div class="loss-device">
              <img src="./images/loss-device.png" alt="" />
              <div class="name">遥测越限</div>
              <div class="val">0<span>次</span></div>
            </div>
          </div>
          <div class="show-data">
            <div class="day">
              <div class="name">本日越限次数</div>
              <div class="val">0<span>次</span></div>
            </div>
            <div class="line"></div>
            <div class="month">
              <div class="name">本月越限次数</div>
              <div class="val">0<span>次</span></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="day-electric">
          <div class="title-bgc">当日逐时用电</div>
          <div class="line-chart">
            <LineChart />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import PieChart from "./component/Pie";
import LineChart from './component/LineChart'
let value = ref("");
let flag = ref("day");
const chageType = (e) => {
  let name = e.target.className;
  if (
    (name != "day" && name != "month" && name != "year") ||
    name == flag.value
  )
    return;
  flag.value = name;
};
</script>
<style lang="scss">
.substation-status {
  width: 100%;
  height: 100%;
  background-color: #000;
  padding: 12px 18px 20px 10px;
  .station-status,
  .run-status,
  .electric-situation {
    width: 100%;
    height: 42vh;
    background: url("./images/wrap-bgc.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 1.7vh;
    .title-bgc {
      margin: 0 auto;
      width: 146px;
      height: 39px;
      text-align: center;
      font-size: 20px;
      line-height: 39px;
      font-weight: 400;
      color: #3292ff;
      background: url("./images/title-wrap.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .station-status {
    .el-form {
      padding-left: 35px !important;
      padding-top: 3vh;
      .el-form-item__label {
        font-size: 20px !important;
        font-weight: 400 !important;
        color: #fffefe !important;
      }
      .el-input__inner {
        color: #fffefe !important;
      }
      .el-input__wrapper {
        background: #091a37;
        border: none;
        box-shadow: none;
      }
      .btn {
        width: 102px;
        height: 43px;
        background: #091a37;
        text-align: center;
        line-height: 43px;
        font-size: 22px;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .data-wrap {
      padding: 0 22px;

      .one-line {
        display: flex;
        width: 100%;
        justify-content: space-between;
        .v,
        .transformer-num,
        .device {
          width: 172px;
          height: 12vh;
          background: #091a37;
          padding: 2vh 1.5vh 2vh 13px;
          justify-content: space-between;

          display: flex;
          flex-direction: column;
          .val {
            font-size: 24px;
            font-weight: 500;
            color: #ffffff;
          }
          .name-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name {
              font-size: 18px;
              font-weight: 500;
              color: #ffffff;
            }
            img {
              width: 26px;
              height: 26px;
            }
          }
        }
        .transformer-num {
          .name-wrap {
            img {
              width: 24px;
              height: 30px;
            }
          }
        }
        .device {
          .name-wrap {
            img {
              width: 28px;
              height: 25px;
            }
          }
        }
      }
      .two-line {
        margin-top: 1vh;
        display: flex;
        justify-content: space-between;
        .installed-capacity,
        .declare-capacity,
        .xx {
          width: 172px;
          height: 12vh;
          background: #091a37;
          padding: 2vh 1.5vh 2vh 13px;
          justify-content: space-between;

          display: flex;
          flex-direction: column;
          .val {
            font-size: 24px;
            font-weight: 500;
            color: #ffffff;
          }
          .name-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name {
              font-size: 18px;
              font-weight: 500;
              color: #ffffff;
            }
            img {
              width: 26px;
              height: 26px;
            }
          }
        }
        .installed-capacity {
          .name-wrap {
            img {
              width: 22px;
              height: 29px;
            }
          }
        }
        .declare-capacity {
          .name-wrap {
            img {
              width: 31px;
              height: 31px;
            }
          }
        }
      }
    }
  }
  .run-status {
    .content-wrap {
      margin-top: 3.5vh;
      display: flex;
      padding: 0 40px;
      justify-content: space-between;
      align-items: center;

      .kw,
      .kvar,
      .c,
      .water {
        text-align: center;

        width: 200px;
        img {
          width: 70px;
          height: 70px;
        }
        .name {
          font-size: 18px;
          font-weight: 400;
          color: #ffffff;
          margin-top: 10px;
          margin-bottom: 10px;
        }
        .val {
          font-size: 24px;
          font-weight: 500;
          color: #ffffff;
          span {
            font-size: 18px;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
    .jump-wrap {
      margin-top: 2.5vh;
      display: flex;
      padding: 0 22px;
      .communication {
        border: none !important;
      }
      .diagram,
      .video,
      .transformer,
      .communication {
        cursor: pointer;
        border-right: 1px solid #919599;
        display: flex;
        width: 200px;
        flex-direction: column;
        box-sizing: border-box;
        .img-wrap {
          height: 9vh;
          background-color: #5d676f;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .name {
          line-height: 4.2vh;
          background-color: #7d848c;
          color: #bdbfc5;
          font-size: 16px;
          text-align: center;
          height: 4.2vh;
          box-sizing: border-box;
        }
      }
    }
  }
  .electric-situation {
    position: relative;
    .sel-wrap {
      display: flex;
      position: absolute;
      right: 40px;
      width: 180px;
      justify-content: space-between;
      top: 70px;
      li {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        line-height: 43px;
        text-align: center;

        font-size: 22px;
        font-weight: 400;
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
  .event-record-wrap,
  .day-electric {
    width: 100%;
    height: 42.2vh;
    background: url("./images/wrap-bgc.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 1vh;
    padding-top: 1.7vh;
    box-sizing: border-box;
    .title-bgc {
      margin: 0 auto;
      width: 146px;
      height: 39px;
      text-align: center;
      font-size: 20px;
      line-height: 39px;
      font-weight: 400;
      color: #3292ff;
      background: url("./images/title-wrap.png") no-repeat;
      background-size: 100% 100%;
    }
    .content-wrap {
      display: flex;
      padding-top: 2.5vh;
      margin-bottom: 2vh;
      .out-limit,
      .telecommand,
      .loss-device {
        width: 100%;
        padding: 0 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        img {
          width: 80px;
          height: 80px;
        }
        .name {
          font-size: 20px;
          font-weight: 400;
          color: #fffefe;
          margin: 1.4vh 0 1.4vh 0;
        }
        .val {
          font-size: 42px;
          font-weight: 400;
          color: #ffffff;
          span {
            font-size: 19px;
          }
        }
      }
    }
    .show-data {
      margin: 0 auto;
      width: 528px;
      background: #091a37;
      border: 1px solid #001b5b;
      height: 12.2vh;
      display: flex;
      padding: 1vh 35px 0 35px;

      justify-content: space-between;
      align-items: center;
      .line {
        width: 1px;
        background: #bfbfbf;
        height: 77px;
      }
      .name {
        font-size: 23px;
        font-weight: 400;
        color: #ffffff;
      }
      .val {
        font-size: 42px;
        text-align: center;
        font-weight: 400;
        color: #ffffff;
        margin-top: 2vh;
        span {
          font-size: 19px;
        }
      }
    }
  }
}
</style>
